<template>
  <view class="review-page">
    <!-- 头部标题区域. -->
    <view class="header">
      <text class="header-title">订单评价</text>
    </view>

    <!-- 评分部分 -->
    <view class="rate-section">
      <text class="rate-label">请为司机评分：</text>
      <u-rate 
        :count="10" 
        v-model="ratingScore" 
        inactive-color="#e5e5e5" 
        active-color="#ff5a5f" 
        size="32"
      ></u-rate>
    </view>

    <!-- 评价内容输入 -->
    <view class="comment-section">
      <text class="comment-label">评价内容：</text>
      <textarea 
        v-model="ratingComment" 
        placeholder="请输入您的评价..." 
        class="comment-input"
      ></textarea>
    </view>

    <!-- 提交按钮 -->
    <u-button 
      type="primary" 
      class="submit-btn" 
      @click="submitReview"
    >
      提交评价
    </u-button>
  </view>
</template>

<script>
import { userReviewOrder } from '@/api/driver/driver';
export default {
  data() {
    return {
      ratingScore: 5, // 初始评分，可根据需求修改
      ratingComment: '', // 评价内容
      // 这些参数可从路由参数或接口获取，示例中先定义
      orderId: '', 
      userId: '',
      driverId: ''
    };
  },
  onLoad(options) {
      // 接收上个页面传递的orderId
      if (options.orderId) {
        this.orderId = options.orderId;
      }
    },
  methods: {
    submitReview() {
      if (!this.ratingComment.trim()) {
        uni.showToast({
          title: '评价内容不能为空',
          icon: 'none'
        });
        return;
      }
      // 构造评价数据，准备提交到后端
      const reviewData = {
        orderId: this.orderId,
        userId: this.userId,
        driverId: this.driverId,
        ratingScore: this.ratingScore,
        ratingComment: this.ratingComment
      };
      userReviewOrder(reviewData).then(res => {
		  if (res.code === 200) {
			uni.showToast({
			  title: '评价提交成功',
			  icon: 'success'
			});
			setTimeout(() => {
			  uni.navigateBack();
			}, 1500);
		  } else {
			uni.showToast({
			  title: res.message || '评价提交失败',
			  icon: 'none'
			});
		  }
		}).catch(err => {
		  uni.showToast({
			title: '网络异常，提交失败',
			icon: 'none'
		  });
		  console.error('评价提交失败：', err);
		});
    }
  }
};
</script>

<style scoped>
.review-page {
  padding: 20px;
  background-color: #f7f7f7;
  min-height: 100vh;
  box-sizing: border-box;
}

.header {
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

.header-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.rate-section {
  margin-bottom: 25px;
}

.rate-label {
  font-size: 16px;
  color: #555;
  display: block;
  margin-bottom: 10px;
}

.comment-section {
  margin-bottom: 30px;
}

.comment-label {
  font-size: 16px;
  color: #555;
  display: block;
  margin-bottom: 10px;
}

.comment-input {
  width: 100%;
  height: 120px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
  font-size: 14px;
  color: #333;
  background-color: #fff;
}

.submit-btn {
  width: 100%;
  margin-top: 20px;
}
</style>